<template>
	<view>
		<view style="background-color: white; width: 100%;height: var(--status-bar-height);">
		            <!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" title="可选实验列表"/>
		
		<view class="section">
		<!-- <uni-section class="mb-10" title="专业实验" titleFontSize="16px">
			<image class="image_5 pos_2" src="../../static/images/3714304b204fe4669ad4013da48e2f0c.png" />
			<template v-slot:right>
				共 {{list1.length}} 个
			</template>
		</uni-section> -->
		<view class="flex-row justify-between items-center">
		  <view class="flex-row items-center space-x-24">
		    <image class="shrink-0 image_5" src="../../static/images/3714304b204fe4669ad4013da48e2f0c.png" />
		    <text class="title" style="font-size:16px ;">专业实验</text>
		  </view>
		  <text class="font_3 text_6">共 {{list1.length}} 个</text>
		</view>
		 <view class="shrink-0 divider pos_5"></view>
		
		<view class="list_box">
			<uni-list v-for="item,index in list1">
				<uni-list-item link clickable :title="item.name_exper" @click="clicklistitem1(item)"></uni-list-item>
			</uni-list>
		</view>
		</view>
		
		<view class="section_1">
		<!-- <image class="shrink-0 image_5" src="../../static/images/0e5b3b92b6c5e2889cfeae2bcc85bb49.png" />
		<uni-section class="mb-10" title="我的实验"  titleFontSize="16px">
			
			<template v-slot:right>
				共 {{list2.length}} 个
			</template>
		</uni-section> -->
		
		<view class="flex-row justify-between items-center">
		  <view class="flex-row items-center space-x-24">
		    <image class="shrink-0 image_5" src="../../static/images/0e5b3b92b6c5e2889cfeae2bcc85bb49.png" />
		    <text class="title" style="font-size:16px ;">我的实验</text>
		  </view>
		  <text class="font_3 text_6">共{{list2.length}}个</text>
		  <view class="shrink-0 divider pos_7"></view>
		</view>
		
		
		<view class="list_box">
			<uni-list v-for="item,index in list2">
				<uni-list-item link clickable :title="item.name_exper" @click="clicklistitem2(item)"></uni-list-item>
			</uni-list>
		</view>
		</view>
		
		<view class="button_box">
			<button @click="navTo('/pages/addmyexper/addmyexper')">添加我的实验+</button>
		</view>

	</view>
</template>

<script>
	import {_getAllExper} from '@/service/exper_api.js'
	import {_getallmyexper} from '@/service/myexper_api.js'
	export default {
		data() {
			return {
				list1:[],
				list2:[],
				usernum:'',
        serialnum:''
			}
		},
		onLoad(opt) {
			this.setList1();

      this.serialnum=opt.serialnum;
      // console.log(this.serialnum)
		},
		onShow() {
			this.setList2();
		},
		methods: {
			async setList1(){
				let res = await _getAllExper();
				if (res.flag == true){
					this.list1 = res.data;
				}
			},
			async setList2(){
				try {
					const value = uni.getStorageSync('userInfo');
					if (value) {
						this.usernum = value.accountNum;
					}
				} catch (e) {
					console.error(e);
				}
				let res = await _getallmyexper(this.usernum);
				if (res.flag == true){
					this.list2 = res.data;
					console.log(this.list2)
				}
			},
			clicklistitem1(data){
				console.log(data);
				uni.setStorage({
					key: 'experData',  
					data: data.name_exper
				});
				this.navTo('/pages/experdata/experdata')
			},
			clicklistitem2(data){
				console.log(data);
				uni.setStorage({
					key: 'myexperData',  
					data: data.id
				});
        // console.log(this.serialnum)
				this.navTo('/pages/myexperdata/myexperdata?serialnum='+this.serialnum);
			},
			navTo(url){
				uni.navigateTo({
					url:url,
					success(res) {
						console.log("成功！",res)
					},
					fail(res) {
						console.log("失败！",res)
					}
				})
			},
			navBack(){
				uni.navigateBack({
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		// background: $page-color-base;
	}
	.mb-10 {
		margin-bottom: 1rpx;
		margin-left: 100rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}
	.list_box{
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.button_box{
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 50rpx;
		button{
			width: 400rpx;
			background-color: #138f87;
			color: #fff;
			border-radius: 50upx;
			font-size: 33upx;
			height: 80upx;
			padding-left: 50upx;
			padding-right: 50upx;
		}
	}
	.image_5 {
	  width: 62.5rpx;
	  height: 62.5rpx;
	}
	.pos_2 {
	  position: fixed;
	  left: 31.25rpx;
	  top: 115rpx;
	}
	.shrink-0{
	  position: relative;
	  left: 31.25rpx;
	  margin-top: 10rpx;
	  margin-bottom: 15rpx;
	  display: inline-block;
	}
	.section {
	  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
	  border: solid 6.08rpx rgba(19,143,135,0.2);
	}
	.section_1 {
	  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
	  border: solid 6.08rpx rgba(19,143,135,0.2);
	  margin-top: 50rpx;
	}
	.divider {
	  background-color: #a6a6a6;
	  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
	  height: 2.08rpx;
	}
	.pos_5 {
	  position: absolute;
	  left: 12.5rpx;
	  right: 0;
	  top: 158.96rpx;
	}
	
	.title{
		margin-bottom: 1rpx;
		margin-left: 60rpx;
	}
	.font_3{
		font-size: 28rpx;
		margin-right: 30rpx;
	}
	.pos_7 {
	  position: absolute;
	  left: 12.5rpx;
	  right: 0;
	  margin-bottom: -70rpx;
	}
</style>
